<template>
	<view class="content">
		<view class="usersearch">
			<u-search placeholder="请输入搜索内容" v-model="keyword" @custom="usersearchclick(keyword)"></u-search>
		</view>
		 <scroll-view  scroll-x="true" style="padding: 20rpx 0;background: #fff;">
			 <view class="classification_list">
			 	<view class="classification_item" v-for="(item,index) in classification" :key="index">
					{{item}}
				</view>
			 </view>
		 </scroll-view>
		 <view class="warehousing_list">
		 	<view class="warehousing_item" v-for="(goodsitem,goodsindex) in goodslist" :key="goodsindex" @click="stockdetails()">
		 		<view class="warehousing_itemtop">
		 			<image :src="goodsitem.img" mode=""></image>
					<view class="warehousing_edit">
						<view>{{goodsitem.name}}</view>
						<view style="margin-top: 10%;color: #ff2f2f;font-size: 40rpx;">¥{{goodsitem.dj}}</view>
					</view>
		 		</view>
		 	</view>
		 </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				keyword: '',
				classification:["衣服","裤子","裙子","鞋子","饰品","包包","裤子","裙子","鞋子","饰品","包包"],
				goodslist:[
					{id:1,name:"某某某上衣1",dj:299,img:"../../static/image/syzyimg01.png"},
					{id:2,name:"某某某上衣2",dj:299,img:"../../static/image/syzyimg01.png"},
					{id:3,name:"某某某上衣3",dj:299,img:"../../static/image/syzyimg01.png"},
					{id:4,name:"某某某上衣4",dj:299,img:"../../static/image/syzyimg01.png"},
					{id:5,name:"某某某上衣5",dj:299,img:"../../static/image/syzyimg01.png"},
					{id:6,name:"某某某上衣6",dj:299,img:"../../static/image/syzyimg01.png"},
					{id:7,name:"某某某上衣7",dj:299,img:"../../static/image/syzyimg01.png"},
				]
			}
		},
		onLoad() {

		},
		methods: {
			//搜索
			usersearchclick(keyword){
				console.log(keyword)
			},
			stockdetails(id){
				uni.navigateTo({
					url:"../stockdetails/stockdetails?id="+id
				})
			}
		}
	}
</script>

<style>
page{
	background: #f6f6f6;
}
.usersearch{
	width: 90%;
	padding: 2% 5%;
	background: #fff;
}
.classification_list{
	display: flex;
	align-items: center;
	white-space: nowrap;
}
.classification_item{
	margin: 0 20rpx;
	text-align: center;
}
.warehousing_list{
	width: 90%;
	margin: 0 5%;
}
.warehousing_item{
	background: #fff;
	margin: 20rpx 0;
	border-radius: 10rpx;
	box-shadow: 2rpx 2rpx 10rpx #eee;
	padding: 20rpx;
}
.warehousing_itemtop{
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.warehousing_itemtop image{
	width: 150rpx;
	height: 150rpx;
	border-radius: 20rpx;
}
.warehousing_edit{
	width: 450rpx;
}
.warehousing_edit view:nth-child(1){
	color:#424242;
}
</style>
